<template>
  <div>
    <!-- 分页组件 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据"
      @load="onLoad"
      :immediate-check="false"
      :error="error"
    >
      <!-- 全部订单 -->
      <div
        class="flex-column"
        style="background-color:#fff;margin-top:10px;"
        v-for="(item,index) in list"
        :key="index"
        @click="orderDetail(item)"
      >
        <div class="row-space-between">
          <p class="p-orderid">订单号：{{item.orderID}}</p>
          <p style="font-size: 13px;margin-right:14px;" v-if="item.stateID ==2">已付款</p>
          <p
            style="font-size: 13px;margin-right:14px;"
            v-if="item.stateID ==3||item.stateID ==11||item.stateID == 12"
          >待付款</p>
          <p
            style="font-size: 13px;margin-right:14px;"
            v-if="item.stateID == 9 || item.stateID == 10 || item.stateID == 13"
          >交易关闭</p>
          <p style="font-size: 13px;margin-right:14px;" v-if="item.stateID ==1">已完成</p>
          <p style="font-size: 13px;margin-right:14px;" v-if="item.stateID ==5">申请退款中</p>
          <p style="font-size: 13px;margin-right:14px;" v-if="item.stateID ==6">已退款</p>
          <p style="font-size: 13px;margin-right:14px;" v-if="item.stateID ==7">商家已取消</p>
        </div>
        <div class="column-center">
          <div class="list-item flex-row">
            <van-image width="116" height="116" fit="contain" :src="item.courseImg"></van-image>
            <div class="column-space-between course-detail">
              <div>
                <p class="text-p2">{{item.courseName}}</p>
                <p class="text-p3">
                  {{item.courseType}}-
                  <van-icon name="location" size="10" color="#F40404" />
                  {{item.courseAddress}}
                </p>
              </div>
              <div>
                <p class="text-p3">已选：{{item.specification}}</p>
                <div class="row-space-between" style="text-align:left">
                  <span style="color:#F40404;">￥{{item.originalPrice|fixed}}</span>
                  <span style="color: rgba(16, 16, 16, 0.65);font-size: 10px;">x1</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex-row count"
          style="color: rgba(16, 16, 16, 0.65);margin:0 18px 0 0;"
          v-if="item.stateID!=5&&item.stateID!=6&&item.stateID!=7&&item.stateID!=9&&item.stateID!=10&&item.stateID!=1&&item.stateID!=13"
        >优惠：￥{{item.preferentialRatio|preferential(item)}}</div>
        <div class="flex-row count">
          合计：
          <span style="color:#F40404;" v-if="item.stateID==1||item.stateID == 2 || item.stateID==5||item.stateID==6">￥{{item.realAmount|fixed}}</span>
          <span style="color:#F40404;" v-else>￥{{item.preAmount|fixed}}</span>
        </div>
        <div style="height: NaNpx;border: 1px solid rgba(235, 235, 235, 1);margin:0 10px;" />
        <div class="row-flex-end" style="padding:5px 14px;">
          <!-- 已完成 -->
          <van-button
            size="small"
            v-if="item.stateID == '1'"
            color="#FF9900"
            plain
            @click="StuDetails(item)"
          >查看学员信息</van-button>
          <!-- 已付款 -->
          <van-button
            size="small"
            v-if="item.stateID == '2'"
            color="#FF9900"
            plain
            style="margin-right:10px;"
            @click.stop="editStuInfo(item)"
          >编辑学员信息</van-button>
          <van-button
            size="small"
            v-if="item.stateID == '2'"
            color="#3A3A3A"
            plain
            @click.stop="refundOrder(item)"
          >申请退款</van-button>
          <!-- 待付款 -->
          <van-button
            size="small"
            v-if="item.stateID == '12'"
            color="#FF9900"
            plain
            style="margin-right:10px;"
            @click.stop="showPayPop(item)"
          >立即支付</van-button>
          <van-button
            size="small"
            v-if="item.stateID == '11'||item.stateID == '12'"
            color="#3A3A3A"
            plain
            @click.stop="cancelOrder(item)"
          >取消订单</van-button>
          <!-- 交易关闭、已退款、商家已取消 -->
        </div>
      </div>
    </van-list>
    <!-- 支付方式列表 -->
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>

<script>
import { GetOrder } from "@/api/personal";
import { CancelOrder, RefundOrder, ChooseMethod } from "@/api/order";
import { mapGetters } from "vuex";
import { Toast,Dialog } from "vant";
export default {
  data() {
    return {
      list: [], //订单列表
      page: 1, //当前页码
      pageSize: 5, //一页显示的总数
      total: 0,
      lastPage: 0,
      loading: false,
      finished: false,
      error: false,
      actions: [], //支付方式列表
      show: false //支付方式弹窗
    };
  },
  methods: {
    async onLoad() {
      if (this.lastPage != 0 && this.page < this.lastPage) {
        this.page += 1;
        const result = await GetOrder({
          page: this.page,
          size: this.pageSize,
          customerAccount: this.phone,
          showState: "0"
        });
        if (result.result == "OK") {
          this.list = this.list.concat(result.data.data);
        } else {
          this.error = true;
        }
      }
      this.loading = false;
      if (this.lastPage == this.page) {
        this.finished = true;
      }
    },
    // 订单详情
    orderDetail(value) {
      this.$router.push({
        name: "OrderDetail"
      });
      this.$store.commit("setSubmitOrderId", value.orderID);
    },
    //取消订单
    async cancelOrder(value) {
      Dialog.confirm({
        title: "取消订单",
        message: "确认取消订单？"
      })
        .then(async () => {
          // on confirm
          const result = await CancelOrder({
            orderNo: value.orderID
          });
          if (result.result == "OK") {
            Toast.success("取消成功");
            this.dataInit();
          } else {
            this.dataInit();
            Toast.clear();
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    // 申请退款
    async refundOrder(value) {
      const result = await RefundOrder({
        orderNo: value.orderID
      });
      if (result.result == "OK") {
        Toast.success("已申请退款");
        this.dataInit();
      }
    },
    // 编辑学员
    editStuInfo(value) {
      this.$store.commit("setEditStuOrderId", value.orderID);
      this.$store.commit("setAllSee", value.isAllSee);
      this.$router.push({
        name: "EditStuInfo"
      });
    },
    // 初始化订单
    async dataInit() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      const result = await GetOrder({
        customerAccount: this.phone,
        showState: "0",
        page: this.page,
        size: this.pageSize
      });
      if (result.result == "OK") {
        this.list = result.data.data;
        this.total = result.data.total;
        this.lastPage = result.data.lastpage;
      }
      if (result.msg == "暂无订单信息") {
        this.finished = true;
      }
      Toast.clear();
    },
    // 展示付款方式
    showPayPop(value) {
      let offline = value.payMethod.indexOf("1"); //线下
      let online = value.payMethod.indexOf("2"); //线上
      let cash = value.payMethod.indexOf("3"); //现金
      let orderID = value.orderID;
      let courseID = value.courseID;
      let list = [];
      if (online >= 0) {
        list.push({
          id: 1,
          name: "线上支付",
          paymentMethod: "2",
          orderID: orderID,
          courseID: courseID
        });
      }
      if (offline >= 0 && cash >= 0) {
        list.push({
          id: 2,
          name: "线下支付",
          paymentMethod: "1,3",
          orderID: orderID,
          courseID: courseID
        });
      } else if (offline >= 0) {
        list.push({
          id: 2,
          name: "线下支付",
          paymentMethod: "1",
          orderID: orderID,
          courseID: courseID
        });
      } else if (cash >= 0) {
        list.push({
          id: 2,
          name: "线下支付",
          paymentMethod: "3",
          orderID: orderID,
          courseID: courseID
        });
      }
      this.actions = list;
      this.show = true;
    },
    // 待付款--立即支付--选择支付方式
    async onSelect(value) {
      Toast.loading({ forbidClick: true, duration: 0 });
      const result = await ChooseMethod({
        orderNo: value.orderID,
        paymentType: value.paymentMethod,
        courseID: value.courseID
      });
      if (result.result == "OK") {
        Toast.success("选择成功");
        this.show = false;
        // 刷新订单列表
        this.dataInit();
      } else {
        this.show = false;
        Toast.fail(result.msg);
      }
    }
  },
  async created() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true
    });
    const result = await GetOrder({
      customerAccount: this.phone,
      showState: "0",
      page: this.page,
      size: this.pageSize
    });
console.log(result);

    if (result.result == "OK") {
      this.list = result.data.data;
      this.total = result.data.total;
      this.lastPage = result.data.lastpage;
    }
    if (result.msg == "暂无订单信息") {
      this.finished = true;
    }
    Toast.clear();
  },
  computed: {
    ...mapGetters({ phone: "getPhone" })
  },
  filters: {
    preferential: (value, item) => {
      return (
        (value.replace("%", "") / 100) *
        parseFloat(item.originalPrice) *
        -1
      ).toFixed(2);
    },
    fixed(value) {
      return parseFloat(value).toFixed(2);
    }
  }
};
</script>

<style scoped>
.text-p2 {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  margin: 3px 0 3px 0;
}
.text-p3 {
  margin: 0;
  color: rgba(16, 16, 16, 0.65);
  font-size: 10px;
  text-align: left;
  line-height: 12px;
}
.list-item {
  width: 95%;
  height: 116px;
  background-color: #fff;
  line-height: 20px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
.p-orderid {
  color: rgba(58, 58, 58, 0.65);
  font-size: 12px;
  text-align: left;
  margin-left: 14px;
}
.count {
  justify-content: flex-end;
  margin: 5px 18px 5px 0;
  font-size: 12px;
}
.course-detail {
  background-color: #fafafa;
  padding: 7px;
  width: 241px;
}
</style>